<template>
	<view class="line" :style="[borderBoxStyle]">
        <view :style="[borderStyle]"></view>
	</view>
</template>

<script>
	export default {
		name:"wlk-border",
		data() {
			return {
                borderBoxStyle:{},
                borderStyle:{}
			};
		},
        //属性
        props: {
            item: {
                type: Object,
                default: ()=> {
                    return []
                }
            }
        },
        created:function(e){
            this.setBorderStyle();
        },
        methods: {
            setBorderStyle(){
                this.borderStyle.borderTopWidth = uni.$u.addUnit(this.item.style.height, 'rpx');
                this.borderStyle.borderTopStyle = this.item.params.mode;
                this.borderStyle.borderTopColor = this.item.style.lineColor;
                this.borderBoxStyle.height = uni.$u.addUnit(this.item.style.height+20, 'rpx');
                this.borderBoxStyle.backgroundColor = this.item.style.bgColor;
                this.borderBoxStyle.padding = uni.$u.addUnit(this.item.style.paddingTop, 'rpx')+' '+uni.$u.addUnit(this.item.style.paddingLeft, 'rpx');
            },
        }
	}
</script>

<style lang="scss">
    .line{
        overflow: hidden;
    }
</style>